<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table.hovertable {
            font-family: verdana,arial,sans-serif;
            font-size:20px;
            color:#333333;
            border-width: 1px;
            border-color: #999999;
            border-collapse: collapse;

        }
        table.hovertable th {
            background-color:#c3dde0;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #a9c6c9;
        }
        table.hovertable tr {
            background-color:#d4e3e5;
        }
        table.hovertable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #a9c6c9;
        }
    </style>
    <link rel="stylesheet" href="../bootstrap
    /css/bootstrap.css">
</head>
<body>
    <h1>书籍展示页面</h1>
        <table id="book-table" class="hovertable">
            <thead>
                <tr>
                    <th><input id="allCheck" type="checkbox"></th>
                    <th>书籍id</th>
                    <th>书籍名称</th>
                    <th>书籍价格</th>
                    <th>上线时间</th>
                    <th>是否出版</th>
                    <th>书籍类型</th>
                    <th>书籍作者</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="book">
                <tr v-for="book in datas" onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td align="center"><input class="check" type="checkbox"></td>
                    <td>{{book.bookId}}</td>
                    <td>{{book.bookName}}</td>
                    <td>{{book.bookPrice}}</td>
                    <td>{{book.bookDate}}</td>
                    <td>{{book.bookPutaway}}</td>
                    <td>{{book.bookType}}</td>
                    <td>{{book.bookAuthor}}</td>
                    <td><button v-on:click="delBook(book.bookId)">删除</button></td>
                </tr>


            </tbody>
        </table>

    <!--引入js-->
    <script src="../vue/vue.js" charset="utf-8"></script>
    <script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js" ></script>

    <!--js代码区域-->
    <script>
        $(function (){
            var vmm=new Vue({
                el: "#book",
                data: {
                    datas: []
                },
                mounted:function(){
                    this.showData();
                },
                methods:{//方法区域 vue中需要的方法都写在本区域
                    showData:function () {
                        $.ajax({
                            type:"post",
                            url:"../Book/selBook",
                            data:{"pid":0},
                            datatype:"json",
                            success: function (json) {
                                var data = json.data;
                                for(var i=0;i<data.length;i++){
                                    vmm.datas.push(data[i]);
                                }
                            }
                        })
                    },
                    delBook: function(bookId){
                            $.ajax({
                            type: "post",
                            url: "../Book/delBook",
                            data:{bookId:bookId},
                            dataType: "json",
                            success: function (data) {
                                alert(data.msg);
                                location.reload();
                            }
                        });
                    }
                }
            })
        })
        // 全选
        $("#allCheck").click(function () {
            if (this.checked) {
                $(".check").each(function () {
                    this.checked = true;
                });
            } else {
                $(".check").each(function () {
                    this.checked = false;
                });
            }
        });
    </script>
</body>
</html>